<template>
  <div id="de">
     <button @click="show=!show">show/hide</button>
     <transition name="fade">
         <p v-if="show">点击</p>
     </transition>
     
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      show:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fade-enter-active,.fade-leave-active{
    transition: opacity .5s;
}
.fade-enter,.fade-leave-active{
    opacity: 0;
}
</style>
